<template>
  <div>
    <el-container class="big-box">
      <el-header class="top">
        <h1>
          <img src="../assets/images/logo1.png" alt />
          <!-- <button @click="shouqi">{{zank}}</button> -->
          <span v-for="item in list" :key="item.src" style="margin-left:15px;">
            <img :src="item.src" @click="tupian()" />
          </span>
        </h1>
        <span>欢迎你，admin！今天是2019年3月28日 14:50 星期四</span>
      </el-header>
      <el-container>
        <el-aside :width="aside.width">
          <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">填写申请单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="QingJia = true">请假</el-menu-item>
                <el-menu-item index="2-2" @click="WaiChu = true">外出</el-menu-item>
                <el-menu-item index="2-3" @click="msg1 = true">出差</el-menu-item>
                <el-menu-item index="2-4" @click="JiaBan = true">加班</el-menu-item>
                <el-menu-item index="2-5" @click="LouDaKa = true">漏打卡</el-menu-item>
                <el-menu-item index="2-6" @click="HuoDongJinFei = true">活动经费</el-menu-item>
                <el-menu-item index="2-7" @click="ZCZT = true">资产增添</el-menu-item>
                <el-menu-item index="2-8" @click="HXSQ = true">换休</el-menu-item>
                <el-menu-item index="2-9">9000文档审批</el-menu-item>
                <el-menu-item index="2-10">印鉴审批</el-menu-item>
                <el-menu-item index="2-11">资产系统管理</el-menu-item>
                <el-menu-item index="2-12">介绍信审批</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="3">
              <i class="el-icon-menu"></i>
              <span slot="title">待我处理的申请单</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-document"></i>
              <router-link slot="title" tag="span" to="/waichu">我已处理的申请单</router-link>
            </el-menu-item>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">我提交申请单</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="5-1">正在处理中的</el-menu-item>
                <router-link tag="el-menu-item" index="5-2" to="/WYWCCLSQD">已完成处理</router-link>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <span slot="title">申请单查询</span>
            </el-menu-item>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">统计信息</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="6-1">加班统计</el-menu-item>
                <el-menu-item index="6-2">考勤统计</el-menu-item>
                <el-menu-item index="6-3">出差统计</el-menu-item>
                <router-link index="6-4" to="/RYWC" tag="el-menu-item">人员出差外出情况查询</router-link>
                <router-link index="6-5" to="/WTXFHJL" tag="el-menu-item">未填写返回记录</router-link>
                <el-menu-item index="6-6">工作日志查看</el-menu-item>
                <el-menu-item index="6-7">任务统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer>技术支持：武汉金豆医疗数据科技有限公司</el-footer>
        </el-container>
      </el-container>
    </el-container>

    <ChuCai :parentmsg="msg1" @event2="getMsgFormSon"></ChuCai>
    <Qingjia :QingJiamsg="QingJia" @qingjiason="qingjiason1"></Qingjia>
    <WaiChu :WaiChumsg="WaiChu" @WaiChuson="WaiChuson1"></WaiChu>
    <JiaBan :JiaBanmsg="JiaBan" @JiaBanson="JiaBanson1"></JiaBan>
    <LouDaKa :LouDaKamsg="LouDaKa" @LouDaKason="LouDaKason1"></LouDaKa>
    <HuoDongJinFei :HuoDongJinFeimsg="HuoDongJinFei" @HuoDongJinFeimsgson="HuoDongJinFeison1"></HuoDongJinFei>
    <ZCZT :ZCZTmsg="ZCZT" @ZCZTson="ZCZTson1"></ZCZT>
    <HXSQ :HXSQmsg="HXSQ" @HXSQson="HXSQson1"></HXSQ>
  </div>
</template>

<script>
import ChuCai from "./ChuCai.vue";
import Qingjia from "./Qingjia.vue";
import WaiChu from "./WaiChu.vue";
import JiaBan from "./JiaBan.vue";
import LouDaKa from "./LouDaKa.vue";
import HuoDongJinFei from "./HuoDongJinFei.vue";
import ZCZT from "./ZCZT.vue";
import HXSQ from "./HXSQ.vue";

export default {
  name: "HelloWorld",
  data() {
    return {
      HXSQ: false,
      ZCZT: false,
      HuoDongJinFei: false,
      LouDaKa: false,
      JiaBan: false,
      WaiChu: false,
      QingJia: false,
      list: "",
      zank: "收起",
      aside: { width: "240px" },
      isCollapse: true,
      msg1: false,
      innerVisible: false,
      value1: "",
      sqdp: "",
      desc: "",
      yccdd: "",
      msgwww: false
    };
  },
  props: {
    msg: String
  },
  components: {
    ChuCai,
    Qingjia,
    WaiChu,
    JiaBan,
    LouDaKa,
    HuoDongJinFei,
    ZCZT,
    HXSQ
  },
  created() {
    this.tupian();
  },

  methods: {
    change(data) {
      this.innerVisible = data;
    },
    getMsgFormSon(data) {
      this.msg1 = data;
    },
    qingjiason1(data) {
      this.QingJia = data;
    },
    WaiChuson1(data) {
      this.WaiChu = data;
    },
    JiaBanson1(data) {
      this.JiaBan = data;
    },
    LouDaKason1(data) {
      this.LouDaKa = data;
    },
    HuoDongJinFeison1(data) {
      this.HuoDongJinFei = data;
    },
    ZCZTson1(data) {
      this.ZCZT = data;
    },
    HXSQson1(data) {
      this.HXSQ = data;
    },

    shouqi() {
      var dede = this.isCollapse;
      if (dede) {
        this.isCollapse = false;
        this.aside.width = "64px";
        this.zank = "收起";
      } else {
        this.isCollapse = true;
        this.aside.width = "260px";
        this.zank = "展开";
      }
    },
    tupian() {
      var _this = this;
      var url = "json/tupian.json";
      var dede = this.isCollapse;
      if (dede) {
        this.isCollapse = false;
        url = "json/tupian.json";
        this.aside.width = "260px";
      } else {
        this.isCollapse = true;
        url = "json/tupian2.json";
        this.aside.width = "64px";
      }
      this.$http.get(url).then(function(res) {
        _this.list = res.data;
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.left {
  background: #b0c0ff;
  width: 260px;
  background: #fff;
}

.left ul {
  padding: 10px;
}

.left ul > li h2 {
  font-size: 16px;
  color: #0978cb;
  padding: 10px 20px;
  margin: 0;
  background: url(../assets/images/xuxian.png) center bottom no-repeat;
}

.left ol {
  padding-left: 30px;
}

.left ol li {
  padding: 6px;
  padding-left: 26px;
  background: url(../assets/images/fxicon.png) no-repeat 6px center;
}
.left ol li a {
  color: #666;
}

.left ul > li h2:hover,
.left ol li:hover,
.left ul > li h2:hover a,
.left ol li:hover a,
.left ol .active a {
  color: #ff9700;
  cursor: pointer;
}

.left ol li:hover,
.left ol .active {
  background: url(../assets/images/fxicon-hover.png) no-repeat 6px center;
}

.left ul a.active {
  color: #ff9700;
}
.left ul a {
  display: inline-block;
  width: 100%;
}

.table > tbody > tr:hover {
  background: #fff4e6;
}
.list .fy_wrap {
  text-align: left;
  background: #fff !important;
}
.el-aside {
  background: #fff;
}
.big-box {
  background: #f9f9f9;
  .top {
    background: url(../assets/images/banner.png);
    display: flex;
    justify-content: space-between;
    img {
      margin-top: 6px;
    }
    span {
      color: #fff;
      margin-top: 23px;
    }
  }
  .el-footer {
    text-align: center;
  }
}
</style>
